import React from "react";
import { Row, Form, Input, Button, Select, DatePicker } from "antd";
import styles from "./SearchHeader.less";

const { RangePicker } = DatePicker;

const isValuesValid = values => (
  Object.keys(values).some(k =>
    Object.hasOwnProperty.call(values, k)
    && values[k] !== undefined,
  )
);

class SearchHeader extends React.Component {
  onSearch = () => {
    const { form, onSearch } = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (!errors) {
        if (isValuesValid(values)) {
          onSearch(values);
        } else {
          onSearch(null, true);
        }
      }
    });
  };

  // eslint-disable-next-line
  onReset = () => this.props.form.resetFields();

  renderButtons() {
    const { searchLoading } = this.props;
    const extraProps = searchLoading !== undefined ? { loading: searchLoading } : {};
    return (
      <Row className={styles.btnContainer}>
        <Button onClick={this.onSearch} {...extraProps}>查询</Button>
        <Button onClick={this.onReset}>重置</Button>
      </Row>
    );
  }

  renderConfig(config) {
    const { type = "input", key } = config;
    const { form } = this.props;
    switch (type) {
      case "input":
        return (
          <InputFormItem
            config={config}
            form={form}
            key={key}
            enterSearch={this.onSearch}
          />
        );
      case "select":
        return (
          <SelectFormItem
            config={config}
            form={form}
            key={key}
          />
        );
      case "date":
        return (
          <DateFormItem
            config={config}
            form={form}
            key={key}
          />
        );
      default:
        throw new Error("Unsupported type");
    }
  }

  render() {
    const { formConfig } = this.props;
    return (
      <Form>
        <Row
          className={styles.root}
          // justify="space-between"
          type="flex"
        >
          {formConfig.map(c => this.renderConfig(c))}
          {this.renderButtons()}
        </Row>
      </Form>
    );
  }
}

export default Form.create()(SearchHeader);

function InputFormItem({
                         form,
                         config,
                         labelWidth = 48,
                         enterSearch,
                       }) {
  const { getFieldDecorator } = form;
  const {
    width,
    itemProps = { placeholder: "请输入", style: { width: width || 234 } },
    key,
    label,
    options = {},
  } = config;
  return (
    <Row>
      <span
        className={styles.label}
        style={{ width: labelWidth }}
      >
        {label}
      </span>
      <Form.Item>
        {getFieldDecorator(key, options)(<Input onPressEnter={enterSearch} {...itemProps} />)}
      </Form.Item>
    </Row>
  );
}

function SelectFormItem({
                          form,
                          config,
                          labelWidth = 48,
                        }) {
  const { getFieldDecorator } = form;
  const {
    width,
    itemProps = {
      allowClear: true,
      placeholder: "请选择",
      style: { width: width || 234 },
    },
    key: fieldKey,
    label,
    options = {},
    dataSource = [],
  } = config;
  return (
    <Row>
      <span
        className={styles.label}
        style={{ width: labelWidth }}
      >
        {label}
      </span>
      <Form.Item>
        {getFieldDecorator(fieldKey, options)((
          <Select {...itemProps}>
            {dataSource.map(({ key, value }) => (
              <option key={key} value={key}>{value}</option>
            ))}
          </Select>
        ))}
      </Form.Item>
    </Row>
  );
}

function DateFormItem({
                        form,
                        config,
                        labelWidth = 48,
                      }) {
  const { getFieldDecorator } = form;
  const {
    width,
    itemProps = { style: { width: width || 290 } },
    key: fieldKey,
    label,
    options = {},
  } = config;
  return (
    <Row>
      <span
        className={styles.label}
        style={{ width: labelWidth }}
      >
        {label}
      </span>
      <Form.Item>
        {getFieldDecorator(fieldKey, options)((
          <RangePicker {...itemProps} />
        ))}
      </Form.Item>
    </Row>
  );
}
